<#macro combobox choices id="" class="" sort=false showEmpty=false emptyLabel="" emptyValue="">
<#escape x as x?html>
	<#assign selectionValue=emptyValue />
	<#assign selection=emptyLabel />
	<#if choices??>
		<#list choices as choice>
			<#if choice.selected>
				<#assign selectionValue=choice.value />
				<#assign selection=choice.label />
			</#if>
		</#list>
	</#if>
	<div id="${id}_wrapper" data-fieldId="${id}" class="ui-combobox ${class}">
		<input class="ui-combobox-textbox" type="text" readonly="true" value="${selection}" />
		<input id="${id}" type="hidden" value="${selectionValue}" />
		<div class="ui-combobox-button"></div>
		<div class="ui-combobox-choices sc-box-shadow">
			<#if showEmpty>
				<div class="ui-combobox-choice <#if selection == emptyValue>ui-combobox-choice-selected</#if>" data-value="${emptyValue}">${emptyLabel}</div>
			</#if>
			<#if choices??>
				<#list choices as choice>
					<div class="ui-combobox-choice <#if choice.css??>${choice.css}</#if>  <#if selection == choice.label>ui-combobox-choice-selected</#if>" data-value="${choice.value}">${choice.label}</div>
				</#list>
			</#if>
		</div>
		<script type="text/javascript">
			<#escape x as x?js_string>
				<#if sort>
					$("#${id}_wrapper .ui-combobox-choices .ui-combobox-choice").sort( function( a, b ){
						return a.innerHTML > b.innerHTML ? 1 : -1;
					}).appendTo("#${id}_wrapper .ui-combobox-choices");
				</#if>

				$("#${id}_wrapper .ui-combobox-textbox, #${id}_wrapper .ui-combobox-button").bind('click', function( event ) {
					var textbox = $("#${id}_wrapper .ui-combobox-textbox");
					$("#${id}_wrapper .ui-combobox-choices").css('left', $('#${id}_wrapper').position().left );
					$("#${id}_wrapper .ui-combobox-choices").css('top', textbox.position().top + textbox.outerHeight() );
					$("#${id}_wrapper .ui-combobox-choices").css('min-width', textbox.outerWidth() + $("#${id}_wrapper .ui-combobox-button").outerWidth() );
					$("#${id}_wrapper .ui-combobox-choices").css('max-width', ($(window).width() - $('#${id}_wrapper').position().left) );
					$("#${id}_wrapper .ui-combobox-choices").css('max-height', ($(window).height() - $('#${id}_wrapper').position().top - $('#${id}_wrapper').outerHeight() - 75 ) );
					$("#${id}_wrapper .ui-combobox-choices").toggle(0);

					$("#${id}_wrapper").one('mouseleave', function( event ){
						event.stopImmediatePropagation();
						$("#${id}_wrapper .ui-combobox-choices").hide(750);
					});

					$("#${id}_wrapper .ui-combobox-choices .ui-combobox-choice-empty").one('click', function( event ){
						event.stopImmediatePropagation();
						$("#${id}_wrapper .ui-combobox-choice-selected").removeClass("ui-combobox-choice-selected");
						$("#${id}_wrapper .ui-combobox-textbox").attr('value', "${emptyLabel}");
						$("#${id}").val('${emptyValue}');

						var event = jQuery.Event("list-selection-update");
						event.value = "${emptyValue}";
						$("#${id}_wrapper").trigger(event);
					} );

					$("#${id}_wrapper .ui-combobox-choices .ui-combobox-choice").one('click', function( event ){
						event.stopImmediatePropagation();

						if( $(this).hasClass('ui-combobox-choice-empty') ){
							return;
						}

						$("#${id}_wrapper .ui-combobox-choice-selected").removeClass("ui-combobox-choice-selected");
						$(this).toggleClass("ui-combobox-choice-selected");
						$("#${id}_wrapper .ui-combobox-choices").hide();
						$("#${id}_wrapper .ui-combobox-textbox").attr('value', $(this).html());
						$("#${id}").val( $(this).attr('data-value') );

						var event = jQuery.Event("list-selection-update");
						event.value = $(this).attr('data-value');
						$("#${id}_wrapper").trigger(event);
					});
				} );
			</#escape>
		</script>
	</div>
</#escape>
</#macro>
